/**
 * 管理后台 - 首页 - 左侧边导航栏列表
 * Author: Zeon
 * Date: 2017/8/1
 * Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-side-menu {

    &.hide-text .layout-text {
        display: none;
    }

    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
        text-align: center;
        font-size: 0;
        // img { 
        //     width: 80%;
        // }
    }
}
</style>
<template>
<Menu class="v-side-menu" :class="{'hide-text': spanLeft < this.DEFAULT_BIG_SPAN }" active-name="/admin/home" theme="dark" width="auto" @on-select="routeTo" :accordion="is_accordion">

    <!-- 侧边 logo -->
    <div class="layout-logo-left"></div>

    <div v-for="( menu , index ) in sideMenus" :key="index">

        <Menu-item :name="menu.name" v-if="!menu.submenus">
            <Icon :type="menu.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{ menu.text }}</span>
        </Menu-item>

        <Submenu :name="menu.name" v-else>
            <template slot="title">
                <Icon :type="menu.icon"></Icon>
                {{ menu.text }}
            </template>
            <Menu-item v-for="( submenu , index ) in menu.submenus" :key="index" :name="submenu.name" > 
                <Icon :type="submenu.icon" :size="iconSize"></Icon>
                <span class="layout-text">{{ submenu.text }}</span>
            </Menu-item>
        </Submenu>

    </div>

</Menu>
</template>
<script>

import API_LIST from 'src/API_LIST';
import sideMenus from './menus';
import { mapGetters } from 'vuex';

export default {

    data() {
        return {
            DEFAULT_BIG_SPAN : 4,
            is_accordion : true,
            permission_nodes: [],
            // 菜单配置
            menus: sideMenus,
        }
    },
    props: {
        spanLeft: {
            type: Number,
            required: true,
            'default' : 4
        },
    },
    computed: {

        iconSize () {
            
            let big_size = 24;
            let small_size = 20;

            return this.spanLeft === this.DEFAULT_BIG_SPAN
                ? small_size
                : big_size;
        },

        /**
         * 
         * @return {array} {菜单数组}
         */
        sideMenus(){

            return this.menus || [];

        }
        
    },

    methods: {
        routeTo(path){
            this.$router.push({
                path
            })
        },
    },

    mounted () {
    }
}
</script>